<template>
	<div>
		<el-row type="flex" class="row-bg" justify="center">
			<el-col :span="6">
				<el-input v-model="value" placeholder="请输入内容" @change="onSearch"></el-input>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" icon="el-icon-search" @click="onSearch">搜索歌手</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" v-for="(val, index) in tensingerData" :key="index"
				:offset="index > 0 && index%5 != 0 ? 1 : 0">
				<el-card :body-style="{ padding: '0px' }">
					<div @click="getsingersong(val)">
						<img :src="val.picUrl" class="image">
						<div style="padding: 14px;">
							<span>{{val.name}}</span>
							<div class="bottom clearfix">
								<time class="time" v-for="(val1, index1) in val.alias" :key="index1">{{ val1 }}
									{{index1 < val.alias.length - 1 ? '、' : ''}}</time>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'findsong',
		data() {
			return {
				value: "李健",
				//前10歌手数据
				tensingerData: []
			};
		},
		created() {
			this.gettensingerData();
		},
		methods: {
			//前10歌手数据
			async gettensingerData() {
				let {
					data: ret
				} = await this.$http.get("/top/artists?offset=0&limit=10")
				//console.log(ret)
				this.tensingerData = ret.artists;
			},

			getsingersong(val) {
				this.$router.push({
					path: "/singersong",
					query: {
						id: val.id
					},
				})
			},
			//搜索相关歌手
			async onSearch() {
				let {
					data: ret
				} = await this.$http.get("/search?keywords=" + this.value + "&type=100&limit=10")
				console.log(ret)
				this.tensingerData = ret.result.artists;
			}
		}
	}
</script>

<style lang="less" scoped>
	.row-bg {
		margin-bottom: 40px;
	}

	.el-carousel__item img {
		width: 100%;
		height: 100%;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 283px;
		height: 230px;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>
